import React, { Component } from "react";
import { Table, Button, Row, Col, Input, message } from "antd";
import { connect } from 'dva';
import { saveLicense, pushLicense } from '../../services/services'

const { TextArea } = Input;

@connect(({ draftlist }) => ({
  draftlist
}))
class LocalAction extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedRowKeys: [],
      value: null,
      isShow: '',
    };
  }
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'draftlist/getSiteList', param: { per_page: 999 } });
  }
  onSelectChange = selectedRowKeys => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  };
  onChange = ({ target: { value } }) => {
    this.setState({ value });
  };
  push = () => {
    const { dispatch } = this.props;
    pushLicense({
      "site_id": this.state.selectedRowKeys,
    }).then(res => {
      if (res.code == 200) {
        message.success('下发成功')
        dispatch({ type: 'draftlist/getSiteList', param: { per_page: 999 } });
      } else {
        message.error(res.msg)
      }
      this.setState({
        selectedRowKeys: [],
      })
    })

  }
  save = (id, val) => {
    const { dispatch } = this.props;
    saveLicense({
      "site_id": id,
      "license": this.state.value==null ? val:this.state.value
    }).then(res => {
      if (res.code == 200) {
        message.success('保存成功')
        dispatch({ type: 'draftlist/getSiteList', param: { per_page: 999 } });
      } else {
        message.error(res.msg)
      }
      this.setState({
        isShow: '',
        value: null
      })
    })
  }
  cancel = () => {
    this.setState({
      isShow: '',
      value: null
    })
  }
  render() {
    const { siteList } = this.props.draftlist
    const { loading, selectedRowKeys, value, isShow } = this.state;
    console.log(siteList)
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;
    const columns = [
      {
        title: "站点序号",
        dataIndex: "index",
        key: "index",
        align: "center",
        width: '100px',
        render: (text, record, index) => {
          return index + 1;
        }
      },
      {
        title: "站点名称",
        dataIndex: "site_name",
        key: "site_name",
        align: "center",
      },
      {
        title: "许可",
        key: "license",
        dataIndex: "license",
        align: "center",
        width: '850px',
        render: (val, data) => {
          return (
            isShow == data.site_id ? <div style={{ display: 'flex', alignItems: 'center' }}>
              <TextArea
                value={value==null ? val:value }
                onChange={this.onChange}
                placeholder="请输入license"
                autoSize={{ minRows: 3 }}
              />
              <div style={{ marginLeft: '5px' }}>
                <Button type="primary" onClick={() => this.save(data.site_id, val)} style={{ marginBottom: '5px' }}>
                  保存
                </Button>
                <div>
                  <Button onClick={this.cancel}>
                    取消
                  </Button>
                </div>
              </div>
            </div>
              :
              <div style={{overflow:'auto',height:'100px'}} onClick={() => {
                  this.setState({
                    isShow: data.site_id
                  })
                }}>
                <span >
                  {val ? val : '暂无'}
                </span>
              </div>


          )
        }
      },
      {
        title: "下发状态",
        dataIndex: "push_status",
        key: "push_status",
        align: "center",
        width: '100px',
        render: (status) => {
          return <span>{status == 1 ? '成功' : '失败'}</span>
        },
      },
      {
        title: "下发时间",
        dataIndex: "push_time",
        key: "push_time",
        width: '200px',
        align: "center"
      },
    ];
    return (
      <div style={{ padding: '20px', background: '#fff', height: '100%' }}>
        <div style={{ marginBottom: 16 }}>
          <Button type="primary" onClick={this.push} disabled={!hasSelected}>
            下发
          </Button>
          <span style={{ marginLeft: 8 }}>
            {hasSelected ? `选中 ${selectedRowKeys.length} 个站点` : ''}
          </span>
        </div>
        <Table rowSelection={rowSelection} columns={columns} dataSource={siteList} rowKey={'site_id'} />
      </div>
    );
  }
}

export default LocalAction;